<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>倒计时组件</title>
    <!-- 引入React JS库 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- 引入Babel来转译JSX和Hooks -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
    <div id="example"></div>
    <script type="text/babel">
        function Demo() {
            //控制，展示按钮B
            const [showButtonB, setShowButtonB] = React.useState(false);
            //控制，禁用状态
            const [disableButtonB, setDisableButtonB] = React.useState(true);
            //展示，倒计时数字
            const [countdown, setCountdown] = React.useState(3);

            React.useEffect(() => {
                let intervalId = null;
                if (showButtonB) {
                    intervalId = setInterval(() => {
                        setCountdown((prevCountdown) => prevCountdown - 1);
                    }, 1000);
                }

                if (countdown === 0) {
                    setDisableButtonB(false);
                    clearInterval(intervalId);
                }

                return () => {
                    clearInterval(intervalId);
                };
            }, [showButtonB, countdown]);

            //触发
            const handleClickButtonA = () => {
                setShowButtonB(true);
                setDisableButtonB(true);
                setCountdown(3);
            };

            const handleClickButtonB = () => {
                // 处理按钮 B 被点击后的逻辑
                console.log("按钮 B 被点击了");
            };
            return (
                <div>
                    <button onClick={handleClickButtonA}>按钮 A</button>
                    {showButtonB && (
                        <div>
                            <button onClick={handleClickButtonB} disabled={disableButtonB}>
                                按钮 B
                            </button>
                            <span>{countdown}</span>
                        </div>
                    )}
                </div>
            )
        }

       

        function App() {
            return (
                <div>
                   
                    <Demo />
                </div>
            );

        }
        ReactDOM.render(

            <App />,
            document.getElementById('example')
        );
    </script>
</body>

</html>